import React, { Component } from 'react';
import { TabBar } from 'antd-mobile';

// 引入图片
import cookbook from '@/assets/images/cookbook.png'
import cookbookActive from '@/assets/images/cookbook-active.png'
// import location from '@/assets/images/location.png'
// import locationkActive from '@/assets/images/location-active.png'
import menu from '@/assets/images/menu.png'
import menuActive from '@/assets/images/menu-active.png'
import more from '@/assets/images/more.png'
import moreActive from '@/assets/images/more-active.png'

// 首页
import Cookbook from '../../views/cookbook'

class index extends Component { 

    state = {
        selectedTab: 'cookbook',
        // 让底部导航条，显示还是隐藏，日后存放于redux中
        hidden: false,
    }

    renderContent(pageText) {
        return <div>内容 - {pageText}</div>
    }

    render() {
        return (
            <div style={{ position: 'fixed', height: 'calc(100% - 40px)', width: '100%', top: 40 }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#000"
                    barTintColor="white"
                    hidden={this.state.hidden}
                >
                    <TabBar.Item
                        title="菜谱"
                        key="cookbook"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${cookbook}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${cookbookActive}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'cookbook'}
                        // badge={1}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'cookbook',
                            });
                        }}
                        data-seed="logId"
                    >
                        {/* 该按钮页面布局内容 */}
                        <Cookbook />
                    </TabBar.Item>
                    <TabBar.Item
                        title="分类"
                        key="menu"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${menu}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${menuActive}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'menu'}
                        // badge={1}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'menu',
                            });
                        }}
                        data-seed="logId"
                    >
                        {this.renderContent('menu')}
                    </TabBar.Item>
                    <TabBar.Item
                        title="更多"
                        key="more"
                        icon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${more}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selectedIcon={<div style={{
                            width: '22px',
                            height: '22px',
                            background: `url(${moreActive}) center center /  21px 21px no-repeat`
                        }}
                        />
                        }
                        selected={this.state.selectedTab === 'more'}
                        // badge={1}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'more',
                            });
                        }}
                        data-seed="logId"
                    >
                        {this.renderContent('more')}
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}

export default index;
